import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { actionCreators } from './store';
import { DetailWrapper, Head, Tips, TipContent, Ad, Content } from './style';

class Detail extends PureComponent{
	render() {
		return(
			<DetailWrapper>
				<Head>{this.props.title}</Head>
				<Tips>
					<img src="//upload.jianshu.io/users/upload_avatars/2943762/0634f2ff1269.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt="" />
					<TipContent>
						<h4>局势君</h4>
						<p>字数234, 阅读1234, 评论 2, 喜欢 12, 赞赏 1</p>
					</TipContent>
				</Tips>
				<Ad></Ad>
				<Content dangerouslySetInnerHTML={{__html: this.props.content}} />
			</DetailWrapper>
		)
	}
	componentDidMount() {
		this.props.getDetail(this.props.match.params.id);
	}
}

const mapState = (state) => ({
	title: state.getIn(['detail', 'title']),
	content: state.getIn(['detail', 'content'])
});

const mapDispatch = (dispatch) => ({
	getDetail(id) {
		dispatch(actionCreators.getDetail(id))
	}
});

export default connect(mapState, mapDispatch) (withRouter(Detail));